<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="resources/jquery.js"></script>
  <script src="resources/main.js"></script>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/main.css">
  <meta charset="utf-8">
</head>
<?php
/**
 * Created by PhpStorm.
 * User: Aliaxandr Lazerka
 * Date: 10/28/14
 * Time: 10:27 AM
 */
?>
<body>
<div class="imgDiv" id="div">
  <div class="legend01" id="item1">HELMETS</div>
  <div class="legend3" id="item3">GLASSES</div>
  <div class="legend4" id="item4">PATCHES</div>
  <div class="legend6" id="item6">HOSTELS</div>
  <div class="legend8" id="item8">GLOVES</div>
  <div class="legend10" id="item10">KNEECAPS</div>

  <div class="legend02" id="item2">CAPS</div>
  <div class="legend5" id="item5">VESTS</div>
  <div class="legend7" id="item7">BELTS</div>
  <div class="legend9" id="item9">GUNS</div>

  <div class="legendArea0 bodyArea"></div>
  <div class="legendArea3 bodyArea"></div>
  <div class="legendArea4 bodyArea"></div>
  <div class="legendArea5 bodyArea"></div>
<!--  <div class="legendArea6 bodyArea"></div>-->
  <div class="legendArea7 bodyArea"></div>
  <div class="legendArea8 bodyArea"></div>
  <div class="legendArea9 bodyArea"></div>
  <div class="legendArea101 bodyArea legendArea10"></div>
  <div class="legendArea102 bodyArea legendArea10"></div>
  <img src="img/main.jpg" id="mainImage" style=" width:100%; height: 100%">
</div>
<script>
  $('#item1').mouseover(function () {
    itemHover(true)
  }).mouseout(function () {
    itemHover(false)
  });

  $(document).ready($(window).resize(onresize()));
  $(window).resize(function (){onresize()});
  /**
   * Created by Aliaksandr Lazerka on 10/29/14.
   */

  function onresize() {

    var documentWidth, documentHeight, documentRel, div = document.getElementById('div');
    div.style.width = '0px';
    div.style.height = '0px';
    div.style.top = '0px';
    div.style.left = '0px';

    documentWidth = $(document).width();
    documentHeight = $(document).height();

    documentRel = documentWidth / documentHeight;

    fullScreenProportionalElem(documentRel, documentWidth, documentHeight, div, 5400, 3768);
    resizeFont(documentRel, div, 5400, 3768, 100);
  }

  function fullScreenProportionalElem(documentRel,documentWidth, documentHeight, elem, width, height) {
    var rel = width / height;

    if (documentRel < rel) {
      elem.style.width = documentWidth + 'px';
      elem.style.height = Math.round(documentWidth / rel) + 'px';
      elem.style.top = Math.round(documentHeight / 2 - elem.offsetHeight / 2) + 'px';
      elem.style.left = '0px';
    }
    else if (documentRel > rel) {
      elem.style.width = Math.round(documentHeight * rel) + 'px';
      elem.style.height = documentHeight + 'px';
      elem.style.top = '0px';
      elem.style.left = Math.round(documentWidth / 2 - elem.offsetWidth / 2) + 'px';
    }
    else {
      elem.style.width = documentWidth + 'px';
      elem.style.height = documentHeight + 'px';
      elem.style.top = '0px';
      elem.style.left = '0px';
    }
  }

  function resizeFont(documentRel, elem, width, height, size) {
    var rel = width / height, n = 120000;

    if (documentRel < rel) elem.style.fontSize = height * size / n + 'vw';
    else if (documentRel > rel) elem.style.fontSize = width * size / n + 'vh';
  }
</script>
</body>